<template>
  <div id="app">
    <transition name="router-fade" mode="out-in">
      <!--vue内置的缓存组件 -->
      <keep-alive> 
        <router-view  v-if="$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <!-- 不要缓存 -->
    <transition name="router-fade" mode="out-in">
       <router-view v-if="!$route.meta.keepAlive" />
    </transition>
     
    <tab-bar v-if="$route.meta.isTab" :list="muenList"></tab-bar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      muenList: [
        {
          pagePath: "/home", //
          iconPath: require("assets/images/tabbar/home.png"),
          selectedIconPath: require("assets/images/tabbar/home@selected.png"),
          text: "主页"
        },
        {
          pagePath: "/category", // path
          iconPath: require("assets/images/tabbar/category.png"),
          selectedIconPath: require("assets/images/tabbar/category@selected.png"),
          text: "分类"
        },
        {
          pagePath: "/cart",
          iconPath: require("assets/images/tabbar/cart.png"),
          selectedIconPath: require("assets/images/tabbar/cart@selected.png"),
          text: "购物车"
        },
        {
          pagePath: "/my",
          iconPath: require("assets/images/tabbar/my.png"),
          selectedIconPath: require("assets/images/tabbar/my@selected.png"),
          text: "我的"
        }
      ]
    };
  }
};
</script>

<style>
/* 初始化css样式 */
@import "../src/style/reset.css";
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; */
}
.router-fade-enter-active, .router-fade-leave-active{
  transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave{
  opacity: 0;
}
</style>
